<style lang="stylus">
  .el-menu
    border-right 0
    list-style none
    position relative
    margin 0
    padding-left 0
    background-color #FFF
  .el-menu-item, .el-submenu__title
    height 44px
    line-height 44px
    position relative
    -webkit-box-sizing border-box
    white-space nowrap
    list-style none
  .el-submenu .el-menu-item
    height 38px
    line-height 38px
    padding 0 45px
    min-width 200px
  /deep/.el-tooltip__popper.is-light
    border 1px solid #ffffff
</style>

<template>
  <div style="height: 500px">
    <el-menu router :collapse="collapse" id="top">
      <el-tooltip :disabled="!collapse" placement="right" effect="light">
        <div slot="content">
          <el-input :placeholder="$t('请输入菜单编码')" style="cursor:pointer;" v-model="code" prefix-icon="el-icon-search" class="input-with-select" @keyup.native="searchEnterFun($event)">
          </el-input>
        </div>
        <el-input :placeholder="$t('请输入菜单编码')" style="cursor:pointer;" v-model="code" prefix-icon="el-icon-search" class="input-with-select" @keyup.native="searchEnterFun($event)">
        </el-input>
      </el-tooltip>
      <menu-item-wrap :menu-data="navList" :show-label="collapse"></menu-item-wrap>
    </el-menu>
  </div>
</template>

<script>
// import { wpLeftNav, ppLeftNav } from 'src/plugins/leftNav'
import MenuItemWrap from './MenuItemWrap'
import { transformToTreeFormat } from 'src/utils/fns'
export default {
  props: {
    moduleName: {
      type: String,
      required: true
    },
    collapse: {
      type: Boolean,
      default: true
    }
  },
  components: {
    MenuItemWrap
  },
  data () {
    return {
      code: '',
      data: [],
      ppLeftNav: [],
      wpLeftNav: [
        {
          title: '租户管理',
          kjCode: '',
          icon: '',
          fullPath: '/pp/tenants'
        },
        {
          title: '版本管理',
          kjCode: '',
          icon: '',
          fullPath: '/pp/version'
        }
      ]
    }
  },
  computed: {
    navList () {
      let arr = []
      if (this.moduleName === 'pp') {
        arr = [
          {
            title: '租户管理',
            kjCode: '1',
            icon: 'fas fa-sitemap',
            fullPath: '/pp/tenants'
          },
          {
            title: '版本管理',
            kjCode: '2',
            icon: 'fas fa-sitemap',
            fullPath: '/pp/version'
          },
          {
            title: '运维管理',
            kjCode: '3',
            icon: 'fas fa-sitemap',
            fullPath: '/pp/maintenance',
            children: [
              {
                title: '日志管理',
                kjCode: '31',
                icon: 'fas fa-sitemap',
                fullPath: '/pp/journal',
                children: [
                  {
                    title: '登陆日志管理',
                    kjCode: '311',
                    icon: 'fas fa-sitemap',
                    fullPath: '/pp/land'
                  },
                  {
                    title: '操作日志管理',
                    kjCode: '312',
                    icon: 'fas fa-sitemap',
                    fullPath: '/pp/operation'
                  }
                ]
              },
              {
                title: '配置和服务中心',
                kjCode: '32',
                icon: 'fas fa-sitemap',
                fullPath: '/pp/configure'
              },
              {
                title: '系统监控',
                kjCode: '33',
                icon: 'fas fa-sitemap',
                fullPath: '/pp/system',
                children: [
                  {
                    title: '系统监控',
                    kjCode: '331',
                    icon: 'fas fa-sitemap',
                    fullPath: '/pp/performance'
                  },
                  {
                    title: '链路监控',
                    kjCode: '332',
                    icon: 'fas fa-sitemap',
                    fullPath: '/pp/link'
                  },
                  {
                    title: '连接池监控',
                    kjCode: '333',
                    icon: 'fas fa-sitemap',
                    fullPath: '/pp/connectionpool'
                  }
                ]
              }
            ]
          }
        ]
      }
      if (this.moduleName === 'wp') {
        arr = [...this.wpLeftNav]
      }
      return arr
    }
  },
  mounted () {
    if (this.$q.sessionStorage.has('men')) {
      let left = this.$q.sessionStorage.getItem('men')
      let leftNav = JSON.parse(left)
      console.log(leftNav)
      leftNav.map(item => {
        item.fullPath = item.url
        item.title = item.name
      })
      this.wpLeftNav = transformToTreeFormat(leftNav, 'id', 'parentId', 'children')
    } else {
      this.getMenu()
    }
    console.log(this.wpLeftNav)
  },
  methods: {
    async searchEnterFun (e) {
      console.log('键盘输入')
      let keyCode = window.event ? e.keyCode : e.which
      if (keyCode === 13 && this.code) {
        await this.$api({
          method: 'post',
          url: '/mdm/userloginpermission/queryStation',
          params: {
            kjCode: this.code
          },
          emulateJSON: true,
          useLoadLayer: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.$router.push({ path: data.url })
          },
          errorCallback (err) {
            console.log(err)
          }
        })
      }
    },
    getMenu () {
      this.$api({
        method: 'post',
        url: '/mdm/permission/query',
        params: {
          typeIds: '0',
          pageNo: 1,
          pageSize: 0,
          sort: '',
          order: ''
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(data)
          this.data = data
          data.map(item => {
            item.fullPath = item.url
            item.title = item.name
          })
          this.wpLeftNav = transformToTreeFormat(data, 'id', 'parentId', 'children')
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<i18n>
  {
    "en-us": {
      "租户": "Tenants"
    },
    "zh-hans": {
      "租户": "租户"
    }
  }
</i18n>
